<!--
* @FileDescription: 基础配置
* @Date: 2022年11月23日 17:14:34
* TODO:
* [] Demo
-->

<template>
	<div class="baseConfig" v-loading="loading">
		<div>
			<span>基础配置</span>
		</div>
		<el-form
			class="form"
			ref="form"
			:model="baseNetworkConfig"
			label-width="120px"
		>
			<el-form-item label="服务器IP地址">
				<el-input v-model="baseNetworkConfig.ip"></el-input>
			</el-form-item>
			<el-form-item label="子网掩码">
				<el-input v-model="baseNetworkConfig.netmask"></el-input>
			</el-form-item>
			<el-form-item label="网关">
				<el-input v-model="baseNetworkConfig.gateway"></el-input>
			</el-form-item>
			<el-form-item label="首选DNS">
				<el-input v-model="baseNetworkConfig.dnsPrefer"></el-input>
			</el-form-item>
			<el-form-item label="备选DNS">
				<el-input v-model="baseNetworkConfig.dnsAlter"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
		<el-form
			class="form"
			ref="form"
			:model="baseTimeConfig"
			label-width="120px"
		>
			<el-form-item label="选择时区">
				<el-select
					v-model="baseTimeConfig.timezone"
					placeholder="请选择"
				>
					<el-option
						v-for="(item, index) in baseTimeConfig.timezones"
						:key="index"
						:label="item"
						:value="item"
					>
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="设置系统时间">
				<el-date-picker
					v-model="baseTimeConfig.datetime"
					type="datetime"
					placeholder="选择日期时间"
					:disabled="baseTimeConfig.timeSyncType == 'ntp'"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="NTP服务器">
				<el-input
					v-model="baseTimeConfig.ntp.host"
					:disabled="baseTimeConfig.timeSyncType !== 'ntp'"
				></el-input>
			</el-form-item>
			<el-form-item label="NTP端口">
				<el-input v-model="baseTimeConfig.ntp.port" disabled></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-switch
					v-model="baseTimeConfig.timeSyncType"
					active-text="时区"
					inactive-text="ntp"
					active-value="manual"
					inactive-value="ntp"
				>
				</el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="saveTime">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import {
	getDateAndTimeZone,
	getNetWork,
	updateNetWork,
	updateDate,
	getNetWorkByIp,
} from '@/api/system/networkConfig'
import dayjs from 'dayjs'
export default {
	data() {
		return {
			loading: false,

			baseNetworkConfig: {
				ip: '',
				netmask: '',
				gateway: '',
				dnsPrefer: '',
				dnsAlter: '',
			},
			baseTimeConfig: {
				ntp: {
					host: '',
					port: '',
				},
				datetime: '',
				timeSyncType: 'ntp',
        timezone:''
			},
		}
	},
	async created() {
		try {
			this.loading = true
			const networkData = await getNetWork()
			const { data } = await getDateAndTimeZone()
			this.baseTimeConfig = Object.assign(this.baseTimeConfig, data)
			this.baseTimeConfig.timeSyncType = 'ntp'
			Object.assign(this.baseNetworkConfig, networkData.data[0])
			this.loading = false
		} catch (error) {
			this.loading = false
		}
	},
	methods: {
		async save() {
			try {
				const result = await updateNetWork(this.baseNetworkConfig)
				this.$message({
					type: 'success',
					message: `${result.msg}`,
				})
			} catch (error) {
				console.log(`<<<<2022年12月02日 10:44:26>>>>`, { error: error })
			}
		},
		async saveTime() {
			try {
				const res = await updateDate(this.baseTimeConfig)
				this.$message({
					type: 'success',
					message: `${res.msg}`,
				})
			} catch (error) {
				console.log(`<<<<2022年12月02日 10:44:26>>>>`, { error: error })
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.baseConfig {
	.form {
		.el-form-item {
			margin: 10px;
			width: 50%;
		}
	}
}
</style>
